<template>
	<transition name="slide-down">
		<div class="title-wapper" v-show="titleAndMenuShow">
				<div class="left">
						<span class="icon-back icon"></span>
				</div>
				<div class="right">
						<div class="icon-wapper">
								<span class="icon-shopping icon"></span>
						</div>
						<div class="icon-wapper">
								<span class="icon-user icon"></span>
						</div>
						<div class="icon-wapper">
								<span class="icon-more icon"></span>
						</div>
				</div>
		</div>
	</transition>
</template>

<script>
export default {
	props:{
		titleAndMenuShow:{
			type: Boolean,
			default: false
		}
	}
}

</script>
<style lang='scss' scoped>
@import '../assets/styles/global';
.title-wapper{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 101;
		width: 100%;
		height: px2rem(48);
		background: white;
		box-shadow: 0 px2rem(8) px2rem(8) rgba(0, 0, 0, .15);
		display: flex;
		.left{
				flex: 0 0 px2rem(60);
				@include center;
		}
		.right{
				flex: 1;
				display: flex;
				justify-content: flex-end;
				.icon-wapper{
						flex: 0 0 px2rem(40);
						@include center;
						.icon-shopping{
								font-size: px2rem(26);
						}
						.icon-user{
								font-size: px2rem(18);
						}
						.icon-more{
								font-size: px2rem(22);
						}
				}
		}
}
</style>
